<template>
	<cl-drawer
		ref="drawer"
		:props="{
			title: `${editing ? '修改' : '添加'}城市`,
			appendToBody: true,
			size: '690px'
		}"
		show-confirm
		confirm-text="提交"
		@close="reset"
		@confirm="submit"
		:saving="saving"
	>
		<el-form ref="form" label-position="top" :disabled="saving" :model="form" :rules="rules">
			<el-form-item>
				<el-card shadow="never">
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="所属事业部" prop="biz_id">
								<cl-select
									v-model="form.biz_id"
									style="width: 100%"
									placeholder="请选择事业部"
									filterable
									:disabled="editing"
									@change="bizChange"
								>
									<el-option
										v-for="item in business"
										:key="item.biz_id"
										:label="item.biz_name"
										:value="item.biz_id"
									/>
								</cl-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="城市名称" prop="name">
								<el-input v-model="form.name" placeholder="请输入城市名称" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="是否开启推广" prop="enable_ad" required>
								<cl-select
									v-model="form.enable_ad"
									placeholder="请选择是否开启推广"
									style="width: 100%"
								>
									<el-option label="是" :value="1" />
									<el-option label="否" :value="0" />
								</cl-select>
							</el-form-item>
						</el-col>
					</el-row>
				</el-card>
			</el-form-item>
			<!-- <el-form-item label="绑定门店" prop="manage_dept_ids">
				<el-card shadow="never">
					<el-transfer
						ref="dept"
						v-model="form.manage_dept_ids"
						filterable
						:data="bizRefData.shop_childs"
						:titles="['门店', '已选']"
						:props="{
							key: 'dept_id',
							label: 'dept_name'
						}"
					/>
				</el-card>
			</el-form-item> -->
			<el-form-item label="绑定城市" prop="manage_city_ids">
				<el-card shadow="never">
					<el-row type="flex" justify="center">
						<el-transfer
							:key="editing"
							ref="city"
							v-model="form.manage_city_ids"
							filterable
							:data="cityList"
							:titles="['城市', '已选']"
						/>
					</el-row>
				</el-card>
			</el-form-item>
		</el-form>
	</cl-drawer>
</template>
<script>
import { cityList, countyList } from "@/assets/countryLevel3";
import { last } from "cl-admin/utils";

export default {
	name: "cl-city-form",
	data() {
		return {
			shopList: [], // 门店列表
			// cityList, //城市列表
			form: {
				id: "",
				name: "",
				enable_ad: 1,
				biz_id: "", //事业部id
				manage_dept_ids: [],
				manage_dept_id: "",
				manage_city_ids: [],
				manage_city_id: ""
			},
			rules: {
				name: [{ required: true, message: "请填写城市名称" }],
				biz_id: [{ required: true, message: "请选择所属事业部" }],
				manage_city_ids: [{ type: "array", required: true, message: "请选择绑定城市" }]
			},
			editing: false,
			saving: false
		};
	},
	computed: {
		bizRefData() {
			const { biz_id } = this.form;
			return this.getBizRefData(biz_id);
		},
		//城市列表
		cityList() {
			return [...cityList, ...countyList.filter(v => last(v.label) === "市")];
		}
	},
	watch: {
		"form.manage_city_ids"(v) {
			console.log("form.manage_city_ids", v);
		}
	},
	created() {
		// this.form.biz_id = this.getCurrBiz();
	},
	methods: {
		open(editing = false, data = {}, biz_id) {
			this.form.biz_id = biz_id || this.getCurrBiz();
			this.editing = editing;
			this.$refs.drawer.create(() => {
				this.reset();
				if (editing) {
					Object.keys(this.form).forEach(key => {
						data[key] != undefined && (this.form[key] = data[key]);
					});
					const { manage_dept_id, manage_city_id } = data;
					this.form.manage_dept_ids = (manage_dept_id || "").split(",").filter(Boolean);
					this.form.manage_city_ids = (manage_city_id || "").split(",").filter(Boolean);
				}
				this.bizChange();
			});
		},
		close() {
			this.$refs.drawer.close();
		},
		reset() {
			this.saving = false;
			// this.$refs.dept.clearQuery("left");
			// this.$refs.dept.clearQuery("right");
			this.$refs.city.clearQuery("left");
			this.$refs.city.clearQuery("right");
			this.$refs.form.resetFields();
		},
		submit() {
			this.$refs.form.validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) return;
				this.saving = true;
				const { editing } = this;
				const { manage_dept_ids, manage_city_ids, ...args } = this.form;
				let form = {
					...args,
					manage_dept_id: manage_dept_ids.join(),
					manage_city_id: manage_city_ids.join()
				};
				await this.$service.spread[`${editing ? "edit" : "add"}managecity`](form).done(
					() => {
						this.saving = false;
					}
				);
				this.$message.success("操作成功");
				this.$emit("confirm");
				this.close();
				await this.getBizRefCity(form.biz_id);
			});
		},
		// 事业部
		bizChange(v) {
			// this.getShopList();
		},
		// 门店
		async getShopList() {
			const { biz_id } = this.form;
			await this.getBizRefShop(biz_id);
		}
	}
};
</script>
